<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bootstrap/js/jquery/2.0.0"></script>
    <link href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <title>Document</title>
    <style>
        div.categoryWithCarousel {
            width: 100%;
            position: relative;
        }

        div.categoryWithCarousel div.headbar {
            background-color: #DD2727;
        }

        div.categoryWithCarousel div.head {
            width: 200px;
            background-color: #C60A0A;
            height: 36px;
            line-height: 36px;
            color: white;
            font-weight: bold;
            font-size: 16px;
            margin-left: 20px;
            display: inline-block;
        }

        div.categoryWithCarousel div.rightMenu {
            display: inline-block;
        }

        div.categoryWithCarousel div.rightMenu a {
            color: white;
            text-decoration: none;

        }

        div.categoryWithCarousel div.rightMenu span {
            margin: 0px 20px;
        }

        div.categoryWithCarousel div.rightMenu img {
            height: 36px;
        }

        div.carousel-of-product {
            height: 510px;
            width: 1024px;
            margin: 0px auto;
        }

        div.carouselImage {
            height: 510px !important;
        }

        div.carouselBackgroundDiv {
            width: 100%;
            /* 宽度100% */
            height: 510px;
            /* 高度510px */
            background-color: #E8E8E8;
            /* 背景色和图片的背景色一致 */
            position: absolute;
            /* 绝对定位 */
            top: 36px;
            /* 向下移动36px */
            z-index: -1;
            /* 表示在轮播图片的下方 */
        }
    </style>
</head>

<body>
    <div class="categoryWithCarousel">
        <div class="headbar">
            <div class="head ">
                <span class="glyphicon glyphicon-th-list" style="margin-left:10px"></span>
                <span style="margin-left:10px">商品分类</span>
            </div>
            <div class="rightMenu">
                <span><a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/chaoshi.png"></a></span>
                <span><a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/guoji.png"></a></span>
                <span>
                    <a href="#nowhere">
                        平板电视
                    </a></span>
                <span>
                    <a href="#nowhere">
                        电热水器
                    </a></span>
            </div>
        </div>
        <div data-ride="carousel" class="carousel-of-product carousel slide" id="carousel-of-product">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#carousel-of-product"></li>
                <li data-slide-to="1" data-target="#carousel-of-product" class=""></li>
                <li data-slide-to="2" data-target="#carousel-of-product" class=""></li>
                <li data-slide-to="3" data-target="#carousel-of-product" class=""></li>
            </ol>
            <!-- Wrapper for slides -->
            <div role="listbox" class="carousel-inner">
                <div class="item active">
                    <img src="https://how2j.cn/tmall/img/lunbo/1.jpg" class="carousel carouselImage">
                </div>
                <div class="item">
                    <img src="https://how2j.cn/tmall/img/lunbo/2.jpg" class="carouselImage">
                </div>
                <div class="item">
                    <img src="https://how2j.cn/tmall/img/lunbo/3.jpg" class="carouselImage">
                </div>
                <div class="item">
                    <img src="https://how2j.cn/tmall/img/lunbo/4.jpg" class="carouselImage">
                </div>
            </div>
        </div>
        <div class="carouselBackgroundDiv"></div>
        </div>
</body>

</html>